<link rel="stylesheet" href="/static/css/back_article_comm.css">
<style>
    .friendLink-panel .input-group .input-group-addon {
        background-color: #eee;
        border-radius: 4px 0 0 4px;
    }

    .friendLink-panel input.disabled {
        background-color: #fff !important;
    }

    .friendLink-panel table td .btn .fa-sort-desc {
        position: relative;
        top: -4px;
        left: 4px;
    }

    @media screen and (min-width: 992px) {
        .content table td.table-operate {
            width: 150px;
        }
    }

    @media screen and (max-width: 768px) {
        .friendLink-panel table td.home_url {
            width: 100px;
            word-wrap: break-word;
            word-break: break-all;
        }
    }

    /*查看评论弹窗 START*/
    .friendLink-win {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        margin-top: 50px;
        color: #ccc;
        max-width: 600px;
        height: 240px;
        border-radius: 10px;
        background-color: rgba(0, 0, 0, .8);
        z-index: 4;
        display: none;
    }

    .panel-success {
        border: #d6e9c6 2px solid;
    }

    .friendLink-win .panel-body {
        height: 100%;
        padding-top: 0;
    }

    .friendLink-win .panel-body header span {
        padding: 2px;
        font-size: 12px;
        text-align: center;
    }

    .friendLink-win header {
        overflow: hidden;
        text-align: center;
        margin-top: -5px;
        margin-bottom: 5px;
        min-height: 40px;
    }

    .friendLink-win header span {
        text-align: center;
    }

    .friendLink-win .friendLink-content {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        font-size: 16px;
        height: 136px;
        padding: 5px;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid #ccc;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
    }

    .friendLink-win .friendLink-footer {
        position: absolute;
        bottom: 15px;
        left: 15px;
    }

    .friendLink-win .friendLink-footer > span {
        margin-left: 10px;
        margin-top: 8px;
    }

    .friendLink-win .closeWin {
        position: absolute;
        right: 15px;
        top: 10px;
        cursor: pointer;
    }

    .friendLink-win .closeWin:hover {
        color: #cc5220;
    }

    /*查看评论弹窗 END*/
</style>
<div class="panel panel-success friendLink-win">
    <div class="panel-body">
        <i class="fa fa-times-circle fa-2x closeWin"></i>
        <div class="friendLink-right con">
            <h4 class="text-center title">关于xx文章的友链</h4>
            <header>
                <span class="person">友链人：<span>xxx</span></span>
                <span class="time"><span></span>时间：<span>2018-5-15 18:12:20</span></span>
            </header>
            <div class="friendLink-content"></div>
        </div>
    </div>
</div>
<div class="panel panel-info friendLink-panel">
    <div class="panel-heading">
        <a class="btn btn-success table-filter"><i class="fa fa-filter fa-md"></i> 筛 选</a>
        <a class="btn btn-success table-reset" style="display: none;"><i class="fa fa-refresh fa-md"></i> 重置条件</a>
        <a href="/page/friendLink/editFriendLink.html" target="_blank" class="btn btn-success add"><i
                class="fa fa-plus fa-md"></i> 添加友链</a>
    </div>
    <div class="panel-body" style="display: none;">
        <form class="bs-example bs-example-form" role="form">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <span class="input-group-addon">网站名称</span>
                    <input type="text" id="site_name" class="form-control" placeholder="请输入关键字...">
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle inputBtn">
                            状&emsp;态
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a data="1">启用</a></li>
                            <li><a data="0">禁用</a></li>
                        </ul>
                    </div>
                    <input type="text" id="enable" readonly class="form-control">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 table-filter-time">
                <div class="input-group">
                    <span class="input-group-addon hidden-sm hidden-xs">添加时间</span>
                    <input type="text" id="startTime" class="form-control startTime" placeholder="添加开始时间...">
                </div>
                <div class="input-cut">至</div>
                <div class="input-group">
                    <input type="text" id="endTime" class="form-control endTime" placeholder="添加结束时间...">
                </div>
            </div>
        </form>
    </div>
    <table class="table table-hover  table-condensed" id="friendLink-table">
        <thead>
        <tr>
            <th>id</th>
            <th>网站名称</th>
            <th>网站地址</th>
            <th>favicon</th>
            <th class="hidden-xs">添加时间</th>
            <th>状态</th>
            <th class="hidden-xs">描述信息</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--<tr>
            <td>1</td>
            <td>关于xx的友链</td>
            <td>2018-04-29</td>
            <td>1的N次幂</td>
            <td>xxxxx</td>
            <td class="table-operate">
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                   <a class="btn btn-danger opt-del dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
                            操作<i class="fa fa-sort-desc fa-lg"></i>
                   </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                      <li role="presentation" >
                         <a role="menuitem" tabindex="1" data="">启用</a>
                      </li>
                      <li role="presentation">
                         <a role="menuitem" tabindex="0" >不启用</a>
                      </li>
                      <li role="presentation">
                         <a role="menuitem" tabindex="-1" >删除</a>
                      </li>
                   </ul>
                </span>
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-warning"><i class="fa fa-edit fa-md"></i> 编辑 </a></span>
                <span class="col-lg-4 col-md-4 col-sm-12 col-xs-12"><a class="btn btn-primary"><i class="fa fa-navicon fa-md"></i> 预览 </a></span>
            </td>
        </tr>-->
        </tbody>
    </table>
</div>
<div class="table-page text-center">
    <ul class="pagination">
        <li class="page-prev disabled"><a href="javascript:void(0)">&laquo;</a></li>
        <!--<li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>-->
        <li class="page-next"><a href="javascript:void(0)">&raquo;</a></li>
    </ul>
</div>
<script src="/static/js/back_article_comm.js"></script>
<script src="/static/js/back_friendLink_index.js"></script>
<script>
    $(function () {
        loadFriendLinkList(true);//加载友链
        $(document).off(".search").on("keydown.search", keyDownSearch);//添加键盘事件
        $(".friendLink-panel a.table-filter").click(tableFilterClick);//友链 条件筛选按钮事件
        $(".friendLink-panel a.table-reset").click(tableFilterResetClick);//重置筛选条件
        $(".friendLink-panel .inputBtn").click(ztreeBtnClick);//条件筛选 下拉菜单选择所属菜单单机事件
        $(".friendLink-panel .panel-body form input[readonly]").dblclick(resetDataClick);//双击重置数据
        $(".friendLink-panel .dropdown-menu").mouseenter(dropdownMenuMouseEnter).mouseleave(dropdownMenuMouseLeave);//下拉菜单事件
        $(".friendLink-panel .panel-body ul.dropdown-menu li a").click(dropdownMenuClick)//条件查询下拉菜单单内容机事件
        $(".table-page ul.pagination").on("click", "li", {name: "friendLink"}, pagingEvent);//友链 分页事件
        $("#friendLink-table").on("click", "td.table-operate a", operateBtnClick);//操作 按钮事件
        /*$(".friendLink-win .closeWin").click(closefriendLinkWin);//自定义弹窗关闭事件*/
    })
</script>